<template>
    <div class="address-box">
        <nav-bar class="nav-bar">
            <template v-slot:default>
                地址管理
            </template>
        </nav-bar>

        <div v-show="list.length == 0" style="margin-top: 200px;text-align: center;">
            还没有地址信息，去添加吧！
        </div>

        <div class="address-item">
            <van-address-list
                v-model="chosenAddressID"
                :list="list"
                default-tag-text="默认"
                @add="onAdd"
                @edit="onEdit"
            />
        </div>
    </div>
</template>

<script>
    import { reactive, toRefs, onMounted } from 'vue';
    import NavBar from '@/components/common/navbar/NavBar.vue';
    import { getAddresslist } from '@/network/address';
    import { useRoute, useRouter } from 'vue-router';

    export default {
        components: {
            NavBar
        },

        setup() {
            const route = useRoute();
            const router = useRouter();
            const state = reactive({
                chosenAddressID: '1',
                list: []
            })

            onMounted(() => {
                getAddresslist().then(res=>{
                    console.log(res);
                    if (res.data.length == 0) {
                        state.list = [];
                        return;
                    }

                    state.list = res.data.map(item=>{
                        console.log(!!item.is_default);
                        return {
                            id:item.id,
                            name:item.name,
                            tel:item.phone,
                            address:`${item.province} ${item.city} ${item.county} ${item.address}`,
                            is_default: !!item.is_default
                        }
                    });
                    console.log(state.list);
                })
            })

            const onAdd = () => {
                router.push({path: '/addressedit', query: { type: 'add' }})
            }

            const onEdit = (item) => {
                router.push({path: '/addressedit', query: { type: 'edit', addressID: item.id }})
            }

            return {
                ...toRefs(state),
                onAdd,
                onEdit,
            }
        }
    }
</script>

<style lang="scss" scoped>
    .address-box {
        height: 100%;
        // .van-radio__icon {
        //     display: none;
        // }
        .address-item {
            margin-top: 45px;
            .van-button {
                background: var(--color-tint);
                background-color: var(--color-tint);
            }
            
        }
    }
    .van-address-list {
        display: flex !important;
        position: relative;
    }
    .van-address-list__bottom {
        bottom: 100px !important;
        margin-bottom: 100px !important;
        position:absolute !important;
        left:100px !important;
        top:150px !important;
    }
</style>